<template>
  <div class="app" >
    <div class="header">
      <Header></Header>
    </div>
      <div class="main_content" style="width: 100%;height: 511px;background-color: #f5f5f6">
          <div class="login_content" style="float:left;border-radius: 5px;width: 400px;height: 250px;
            background-color: white;margin-top: 100px;margin-left: 550px;box-shadow:1px 1px 10px gray">
            <div class="login_title" style="margin-left: 140px;margin-top: 20px" >
              <span style="font-size: 20px">后台登录界面</span>
            </div>
            <div class="login_form">
              <Form ref="formInline" inline>
                <Form-item  style="margin-left: 100px;margin-top: 20px">
                  <Input type="text" v-model="User.username"  placeholder="Username">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </Input>
                </Form-item>
                <Form-item  style="margin-left: 100px;">
                  <Input type="password" v-model="User.password" placeholder="Password">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                  </Input>
                </Form-item>
                <br>
                <Form-item style="margin-left: 120px">
                  <Button type="primary" style="width: 150px" @click="Login()">登录</Button>
                </Form-item>
              </Form>
            </div>
          </div>
      </div>

    <div class="">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Header from "../../components/Header";
  import Footer from "../../components/Footer";
    export default {
      name: "admin",
      data(){
        return{
          User:{},
        }
      },
      components:{
        Header,
        Footer
      },
      methods:{
        Login(){
          if(!this.User.username){alert('请输入账号');return false}
          if(!this.User.password){alert('请输入密码');return false}
          let _this = this
          this.$axios.post("http://localhost:8089/user/login",this.User).then(function (res) {
            //清空本次保存数据
            if(res.data!=-1){
              alert("登录成功！")
              _this.User = {};
              console.log(res)
              _this.$router.push({name:'Main',params:{id:res.data}})
            }else {
              alert("账号或密码错误！");
              _this.User = {};
            }
          }).catch(function (err) {
            alert("登陆失败！");
          })
        }
      }
    }
</script>

<style scoped>

</style>
